<script setup>
import {ref} from "vue";
import {getSysOperLog} from "@/api/system/log/oper_log";
import {operateLogStatusList} from "@/enum/enum";

const modalRef = ref();
const formData = ref({
  id: undefined,
  roleName: '',
  roleCode: ''
})

const open = async (id) => {
  const {data} = await getSysOperLog(id);
  formData.value = {
    ...data
  }
  modalRef.value.handleOpen()
}

defineExpose({open})
</script>

<template>
  <dialog-form ref="modalRef" modalTitle="操作日志详情" modalWidth="1200px" :enable-submit="false" cancel-text="关闭">
    <a-descriptions
        direction="vertical"
        :column="3"
        bordered>
      <a-descriptions-item label="操作模块">{{formData.title}}</a-descriptions-item>
      <a-descriptions-item label="请求地址">{{formData.operUrl}}</a-descriptions-item>
      <a-descriptions-item label="登录信息">{{formData.operName}} / {{formData.operIp}} / {{formData.operLocation}}</a-descriptions-item>
      <a-descriptions-item label="请求方式">{{formData.reqMethod}}</a-descriptions-item>
      <a-descriptions-item label="操作状态">
        <a-tag :color="operateLogStatusList[formData.status].type">{{ operateLogStatusList[formData.status].label }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="消耗时间">{{formData.costTime}}毫秒</a-descriptions-item>
      <a-descriptions-item label="操作时间">{{formData.operTime}}</a-descriptions-item>
      <a-descriptions-item label="操作方法" :span="3">{{formData.method}}</a-descriptions-item>
      <a-descriptions-item label="请求参数" :span="3">{{formData.reqParam}}</a-descriptions-item>
      <a-descriptions-item label="响应参数" :span="3">{{formData.repParam}}</a-descriptions-item>
    </a-descriptions>
  </dialog-form>
</template>

<style scoped lang="scss">

</style>
